<template>
    <div class="app">
        <div id="printTable">
            <div class="titleipt">
                <h1>团队信息汇总表</h1>
            </div>
            <div class="titleipt" id="titlemessage">
                <h2>{{ team[0] ? team[0].teamName : '' }}基本信息</h2>
            </div>
            <div class="titleipt" id="titlemessage">
                <h3>队伍信息</h3>
            </div>
            <el-table :data="team" style="width: 100%">
                <el-table-column prop="id" label="队伍号" width="180"/>
                <el-table-column prop="teamName" label="队伍名称" width="180"/>
                <el-table-column prop="teamAbbreviation" label="队伍简称"/>
                <el-table-column prop="teamLeader" label="负责人"/>
                <el-table-column prop="phone" label="负责人电话"/>
                <el-table-column prop="email" label="负责人邮箱"/>
                <el-table-column prop="address" label="地址"/>
                <el-table-column label="责任书">
                    <template #default="{ row }">
                        <img :src="serverUrl+row.image" alt="" style="width: 80px;height: 80px;">
                    </template>
                </el-table-column>
            </el-table>
            <div class="titleipt" id="titlemessage">
                <h3>成员信息</h3>
            </div>
            <el-table :data="staffs" style="width: 100%">
                <el-table-column prop="id" label="成员号" width="180">
                  <template #default="{ $index }">
              {{ $index+1 }}
            </template>
                </el-table-column>
                <el-table-column prop="userName" label="姓名" width="180"/>
                <el-table-column prop="sex" label="性别"/>
                <el-table-column prop="role" label="身份"/>
                <el-table-column label="组别" width="150">
                    <template #default="{ row }">
                        <span>{{ groupname(row.matchesGroupId) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="idcard" label="身份证号"/>
                <el-table-column prop="email" label="邮箱"/>
                <el-table-column prop="phone" label="手机"/>
                <el-table-column label="照片">
                    <template #default="{ row }">
                        <img :src="serverUrl+row.image" alt="" style="width: 80px;height: 80px;">
                    </template>
                </el-table-column>
            </el-table>
            <div class="titleipt" id="titlemessage">
                <h3>队伍项目申报信息</h3>
            </div>
            <el-table :data="project" style="width: 100%">
                <el-table-column label="项目名" width="150">
                    <template #default="{ row }">
                        <span>{{ projectname(row.projectid) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="参报人员" width="150">
                    <template #default="{ row }">
                        <div v-for="staff,index in row.userIds" :key="index">
                        <p>{{ username(staff) }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="申报难度">
                    <template #default="{ row }">
                        <div v-for="routineid,index in row.routine" :key="index">
                        <p style="float: left;">申报 {{index+1}}:[{{ routineid.content }}({{ routineid.code }}){{ routineid.score }}]&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="btn">
            <el-button type="primary" v-print="'#printTable'">打印</el-button>
            <el-button type="warning" @click="goBack">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useTeamStore } from '../../store/teamgroupid.js';
import { useMatchIdStore } from '../../store/matchid.js';


const matchStore = useMatchIdStore();
const teamStore = useTeamStore();

const matchid = matchStore.matchId;
const teamid = teamStore.teamGroupId;
// saveData();
const token = localStorage.getItem('userToken');

const serverUrl = ref('http://back1.idcfengye.com:15173');
const router = useRouter();

const matchprojectid = ref([]);
const project = ref([]);
const group = ref([]);
const staffs = ref([]);
const team = ref([]);

// 获取所有比赛的组别信息
async function fetchgroupData() {   
  if(!matchid)return; 
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/matchgroup/${matchid}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    }); 
    group.value = response.data.matchgroup; // 确保后端返回的数据结构与此匹配
  } catch (error) {
    console.log(error);
  }
}

// 获取matchid对应项目
async function matchproject() {
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/project/${matchid}`, {
      headers: { 'Authorization': 'Bearer ' + token },
    });
    matchprojectid.value = response.data.project || [];
  } catch (error) {
    console.error('未找到对应项目:', error);
  }
}

// 获取队伍信息
async function fetchTeamData() {   
  if(!teamid) return;
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/teamgroup/${teamid}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });      
    team.value = [response.data.teamGroup]; // 确保后端返回的数据结构与此匹配    
  } catch (error) {
    console.log(error);
  }
}

// 获取队伍成员信息
async function fetchStaffData() {
  if(!teamid) return;
    try{
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/teamstaff/staff/${teamid}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    staffs.value = response.data.staffs; 
  } catch (error) {
    console.log(error);
  }
}

// 获取队伍报名项目以及人员申报信息
async function fetchProjectData() {
  if(!teamid) return;
    try{
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/teamstaff/staff/project/${teamid}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    project.value = response.data.staffs; 
  } catch (error) {
    console.log(error);
  }
}

// 根据id获取用户名
function username(id) {
    const staffid = parseInt(id);
    const staff = staffs.value.find(staff => staff.id === staffid);
    return staff ?   staff.userName : '';
}

// 根据id获取项目名
function projectname(id) {
    const projectname = matchprojectid.value.find(project => project.id === id);
    return projectname ? projectname.projectName : '';
}

//根据id获取组别名
function groupname(id) {  
    const groupname = group.value.find(group => group.id === id);
    return groupname ? groupname.groupname : '';
}

function goBack() {
  router.back();
}

onMounted(() => {
  teamStore.fetchteamgroupid(0);
  matchproject();
  fetchgroupData();
  fetchTeamData();
  fetchStaffData();
  fetchProjectData();
});
</script>

<style lang="less" scoped>
.app {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
}

.el-table .warning-row {
    background: oldlace !important;
}

.el-table .success-row {
    background: #f0f9eb !important;
}

.flex {
    display: flex;
}

.btn {
    text-align: center;
}

.titleipt {
    text-align: center;
}

.titleh {
    display: inline-block;
    font-size: 14px !important;
}

#titlemessage {
    border: 1px solid #dcdfe6;
    height: 40px !important;
    line-height: 1px;
}
.inputfirst {
    border-right: beige;
}

/deep/ .el-input-group__prepend {
    color: black;
}

/deep/ .cell {
    color: black;
}
</style>